<template>
  <div class="card-activity">
    <Card>
      <p slot="title" class="card-title">最新消息</p>
      <div class="wrap-plaltf">
        <Timeline>
          <TimelineItem v-for="(item, i) in data" :key="i" :color="item.color">
            <p class="time">{{ item.updateTime }}</p>
            <div class="content" style="display: flex">
              <div>
                {{
                  item.type == 1
                    ? "平台公告"
                    : item.type == 2
                    ? "业务消息"
                    : item.type == 3
                    ? "认证消息"
                    : item.type == 4
                    ? "系统通知"
                    : ""
                }}
              </div>
              <div style="margin-left: 10px" v-html="item.content">
                {{ item.content }}
              </div>
            </div>
          </TimelineItem>
        </Timeline>
      </div>
    </Card>
  </div>
</template>

<script>
import { getAppMessageSendList } from "@/api/home";

export default {
  name: "bar",
  components: {},
  props: {},
  data() {
    return {
      data: [],
    };
  },
  methods: {
    init() {
      let data = {
        pageNumber: 1,
        pageSize: 10,
      };
      getAppMessageSendList(data).then((res) => {
        this.data = res.result.content;
        this.data[this.data.length - 1].color = "green";
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less">
.card-activity {
  .ivu-card-head {
    border-bottom: none !important;
  }
  .card-title {
    color: #67757c;
  }
  .wrap-plaltf {
    overflow: auto;
    height: 273px;
  }
}
</style>